<route type="home" lang="json">
{
  "style": {
    "navigationBarTitleText": "请求测试页面",
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#ffffff"
  }
}
</route>

<template>
  <view class="p-4">
    <!-- UnoCSS 测试区域 -->
    <view class="mb-4 p-4 bg-blue-100 text-blue-800 rounded-lg border border-blue-300">
      <text class="text-lg font-bold mb-2">🎨 UnoCSS 样式测试</text>
      <view class="text-sm">如果您看到这里有蓝色背景和边框，说明 UnoCSS 工作正常！</view>
    </view>
    <view class="flex flex-wrap gap-2 mb-4">
      <button @click="getTest" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors">
        GET 请求
      </button>
      <button @click="postTest" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
        POST 请求
      </button>
      <button @click="cancelRequest" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors">
        取消 请求
      </button>
    </view>

    <wd-table :data="dataList" @sort-method="handleSort" :height="400">
      <wd-table-col prop="name" label="姓名" width="410rpx" sortable></wd-table-col>
      <wd-table-col prop="grade" label="分数" width="220rpx" sortable>
        <template #value="{ row }">
          <view class="custom-class">
            <text>{{ row.grade }}</text>
            <text>同比{{ row.compare }}</text>
          </view>
        </template>
      </wd-table-col>
      <wd-table-col prop="hobby" label="一言以蔽之" sortable></wd-table-col>
      <wd-table-col prop="school" label="求学之所"></wd-table-col>
      <wd-table-col prop="major" label="专业"></wd-table-col>
      <wd-table-col prop="gender" label="性别"></wd-table-col>
      <wd-table-col prop="graduation" label="学成时间"></wd-table-col>
    </wd-table>
  </view>
</template>

<script>
import { awaitToJsTestApi, getTestApi, postTestApi } from '@/api/testApi'
export default {
  data() {
    return {
      dataList: [
        {
          name: '张飞',
          school: '武汉市阳逻杀猪学院',
          major: '计算机科学与技术专业',
          gender: '男',
          graduation: '2022年1月12日',
          grade: 56,
          compare: '10%',
          hobby: '燕人张飞在此！'
        },
        {
          name: '关羽',
          school: '武汉市阳逻绿豆学院',
          major: '计算机科学与技术专业',
          gender: '男',
          graduation: '2022年1月12日',
          grade: 66,
          compare: '11%',
          hobby: '颜良文丑，以吾观之，如土鸡瓦犬耳。'
        },
        {
          name: '刘备',
          school: '武汉市阳逻编织学院',
          major: '计算机科学与技术专业',
          gender: '男',
          graduation: '2022年1月12日',
          grade: 45,
          compare: '1%',
          hobby: '我得空明，如鱼得水也'
        }
      ]
    }
  },
  methods: {
    /**
     * 排序
     * @param e
     */
    handleSort(e) {
      this.dataList = this.dataList.reverse()
    },
    // GET 请求
    async getTest() {
      const res = await getTestApi({ name: 'uni-lin' })
      console.log(res)
    },

    // POST 请求
    postTest() {
      this.requestTask = postTestApi({ name: 'uni-lin' }, { id: '123456' })
      this.requestTask
        .then(res => {
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 取消 请求
    cancelRequest() {
      // 取消请求
      this.requestTask.abort()
    }
  }
}
</script>
